<template>
	<sw-common-frame :loading="loading">
		<template slot="button">
			<el-button size="small" type="primary" icon="el-icon-plus" @click="handleOpenDialog()">新建目录</el-button>
		</template>
		<el-form slot="query" size="small" inline>
			<el-form-item>
				<el-input v-model="queryData.name" clearable placeholder="请输入库名称" style="width: 180px"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="queryTableData()">查询</el-button>
			</el-form-item>
		</el-form>
		<sw-block-table slot="component" :list="tableData">
			<template v-slot:bodybox="{ data }">
				<div class="ai_dir_body">
					<svg-icon size="56" icon-name="smart_dir"></svg-icon>
					<h4>{{ data.name }}</h4>
				</div>
			</template>
			<template v-slot:buttons="{ data }">
				<el-button-group>
					<el-button size="medium" type="text" icon="el-icon-view" @click="handleLookDetail(data)">详情</el-button>
					<el-button size="medium" type="text" icon="el-icon-edit" @click="handleOpenDialog(data.id)">编辑</el-button>
					<el-button size="medium" type="text" icon="el-icon-delete" @click="handleDeleteData(data)">删除</el-button>
				</el-button-group>
			</template>
		</sw-block-table>
		<template slot="page">
			<sw-pagination :total="dataCount" :page-sizes="queryPages" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryTableData()"></sw-pagination>
		</template>
		<form-dialog v-model="formDialog" :data-id="dataId" @refresh="queryTableData"></form-dialog>
	</sw-common-frame>
</template>

<script>
import formDialog from './form';
import listMixins from '@/mixins/listMixins';
import { getAiDirPageList, deleteAiDir } from '@/api/data/tbNetAiDir';
export default {
	mixins: [listMixins],
	components: { formDialog },
	data() {
		return {
			pageName: '智能目录',
			queryPages: [60, 120, 240],
			queryData: { page: 1, limit: 60 }
		};
	},
	computed: {
		listFunction() {
			return eval(getAiDirPageList);
		},
		deleteFunction() {
			return eval(deleteAiDir);
		}
	},
	methods: {
		//查看智能目录详情
		handleLookDetail(data) {
			this.$router.push({ path: `/data/smartDirectory/${data.id}`, query: { name: data.name } });
		}
	}
};
</script>

<style lang="scss" scoped>
.ai_dir_body {
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	height: 136px;
	h4 {
		color: var(--primary-border-active);
		font-size: 14px;
		margin-top: 10px;
	}
	svg {
		fill: var(--primary-border-active);
	}
}
</style>
